<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>学校简介</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">
        //下面的是设置放大后图片的后面的那个背景div，就是设置它的透明度，还有背景颜色，这个可以根据的自己的喜好，随心所欲的自己你想要的效果，在这里，我设置的黑色的背景，并且把统设置为55%;
        div#gray {
            //背景颜色
            background: black;
            //设置透明度
            opacity: 0.55;
            filter: alpha(opacity=55);
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <ul id="app" class="aui-list aui-media-list">
        <li class="aui-list-header">
            校园简介
        </li>
        <li class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title" v-if="school">{{school.name}}</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div v-if="school" class="aui-list-item-text aui-ellipsis-2">
                        {{school.introduction}}
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <img :src="$baseUrl + school.badgeUrl" onclick="largeImg(this)">
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">校徽</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div class="aui-list-item-text">
                        校徽
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <img :src="$baseUrl + school.planUrl" onclick="largeImg(this)">
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">学校平面图</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div class="aui-list-item-text">
                        学校平面图
                    </div>
                </div>
            </div>
        </li>
        <!-- 图片弹出层 -->
        <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
            <div id="innerdiv" style="position:absolute;">
                <img id="bigimg" style="border:5px solid #fff;" src="" />
            </div>
        </div>
    </ul>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/largeImg.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        var app = new Vue({
            el: '#app',
            data: {
                school: {}
            },
            mounted: function() {
                this.school = $api.getStorage('school')
            }
        });
    };
</script>
